<template>
  <van-nav-bar title="详细信息" left-arrow @click-left="goBack" />
  <van-row class="detail-container">
    <van-col span="24" class="form-container">
      <van-row :gutter="[20, 10]">
        <van-col span="24">
          <van-notice-bar v-if="configStore.checkForbid" left-icon="volume-o" text="当前处于夜间休息时段，寻人寻物启事功能已关闭，请您谅解!" />
        </van-col>
        <van-col span="24" class="form-body">
          <van-cell title="发布类型">
            <template #value>
              <van-tag :type="form.postType === '0' ? 'primary' : 'success'" size="medium">{{ form.postType === '0' ?
                '寻人' :
                '寻物'
                }}</van-tag>
            </template>
          </van-cell>
          <van-cell title="审核状态">
            <template #value>
              <van-tag :type="getTagType(form.postState)" plain size="medium">{{ getTagText(form.postState) }}</van-tag>
            </template>
          </van-cell>
          <van-cell title="名称/姓名" :value="form.lostName" />
          <van-cell title="丢失时间" :value="form.lostTime" />
          <van-cell title="丢失地点" :value="form.lostPlace" />
          <van-cell title="描述信息" :value="form.description" />
          <van-cell title="联系地点" :value="form.contactPlace" />
          <van-cell title="联系人电话" :value="form.contactPhone" />
          <van-row :gutter="[20, 10]" style="padding: 10px;">
            <van-col span="24">
              <van-button v-if="form.postState !== '1'" plain color="#667eea" block :disabled="configStore.checkForbid" @click="handleRepublish">
                重新发布
              </van-button>
            </van-col>
            <van-col span="24">
              <van-button v-if="form.postState == '0'" plain type="danger" block :disabled="configStore.checkForbid" @click="handleCancel">
                取消发布
              </van-button>
            </van-col>
          </van-row>
        </van-col>
      </van-row>
    </van-col>
  </van-row>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useConfigStore } from '@/stores/config';
import { findPostGet, findPostCancel } from '@/api/findPost'
const isWechat = ref(false);
const route = useRoute();
const router = useRouter();

const configStore = useConfigStore();

const form = ref({
  postType: '0',
  lostName: '',
  lostTime: '',
  lostPlace: '',
  description: '',
  contactPlace: '',
  contactPhone: '',
});

const getTagType = (postState) => {
  switch (postState) {
    case '-2':
      return 'danger';
    case '-1':
      return 'danger';
    case '0':
      return 'warning';
    case '1':
      return 'primary';
    case '2':
      return 'success';
    default:
      return 'default';
  }
};

const getTagText = (postState) => {
  switch (postState) {
    case '-2':
      return '已取消';
    case '-1':
      return '未通过';
    case '0':
      return '审核中';
    case '1':
      return '广播中';
    case '2':
      return '已广播';
    default:
      return '未知状态';
  }
};

onMounted(() => {
  const userAgent = navigator.userAgent.toLowerCase();
  isWechat.value = userAgent.includes('micromessenger');
  window.scrollTo(0, 0);
  document.body.style.overflow = 'hidden';
  handleQuery();
});

onUnmounted(() => {
  document.body.style.overflow = '';
});

const goBack = () => {
  router.back();
};

const handleQuery = () => {
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
  });
  findPostGet(route.query.postId).then(res => {
    form.value = res.data;
  }).finally(() => {
    closeToast();
  });
};

const handleRepublish = () => {
  showDialog({
    message: '确认前往编辑?',
    showCancelButton: true,
    confirmButtonColor: '#667eea',
  }).then(() => {
    router.push({
      path: '/findPost/edit',
      query: route.query
    });
  }).catch(() => { });
};

const handleCancel = () => {
  findPostCancel(form.value.postId).then(res => {
    handleQuery();
    showSuccessToast('取消成功');
  })
};
</script>

<style scoped>
.detail-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 0px 15px;
  min-height: calc(100vh - 50px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.form-container {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 15px;
}
</style>
